import React, { useContext } from 'react';

import { ModalContext } from '@/shared/context/ModalContext';
import { useMetaTag } from '@/shared/lib/hooks';
import { Button, ButtonVariants, FlexWrapper, Modal, Snackbar, Title } from '@/shared/ui';
import { useSnackbar } from 'notistack';
import { useWindowSize } from 'usehooks-ts';

import { ratingApi } from '../..';
import s from './ConfirmDelete.module.scss';

export const ConfirmDelete = () => {
  const { enqueueSnackbar } = useSnackbar();
  const { closeModal, data } = useContext(ModalContext);
  const { ratingId, productId } = data || {};
  useMetaTag(true, '#999999');
  const { width } = useWindowSize();
  const [deleteRating] = ratingApi.useDeleteProductRatingMutation();
  const handleDelete = async () => {
    if (!ratingId) {
      return;
    }
    try {
      await deleteRating({
        ratingId: String(ratingId),
        productId: String(productId),
      }).unwrap();
      enqueueSnackbar('Отзыв удален', {
        variant: 'success',
        content: (key, message) => <Snackbar id={key} message={message} size="md" variant="success" />,
      });
    } catch (e) {
      enqueueSnackbar('Упс... Произошла ошибка', {
        variant: 'error',
        content: (key, message) => <Snackbar id={key} message={message} size="md" variant="error" />,
      });
    } finally {
      closeModal();
    }
  };

  return (
    <Modal className={s.modal} isOpen onCloseClick={closeModal} zIndex={1500}>
      <FlexWrapper gap={width > 1024 ? 32 : 24} isCenter>
        <Title size="modal-size" title="Удалить отзыв?" />
        <Button
          disabled={false}
          onClick={handleDelete}
          style={{ marginBottom: width > 1024 ? '24px' : '16px' }}
          variant={ButtonVariants.Danger}
        >
          Удалить
        </Button>
      </FlexWrapper>
      <FlexWrapper isCenter>
        <Button className={s.exit} onClick={closeModal} variant={ButtonVariants.Link}>
          Отмена
        </Button>
      </FlexWrapper>
    </Modal>
  );
};
